<template>
	<view>
		<u-popup :show="show" :closeable="closeable" :closeIconPos="closeIconPos" :mode="mode" @close="close" @open="open" round="20" :zIndex="zIndex" :overlayStyle="{'zIndex': zIndex - 1}" :closeOnClickOverlay="closeOnClickOverlay">
			<!-- 如果是底部弹出，则添加适应IOS底部的样式 -->
			<view class="content" :class="{'fit-ios': mode == 'bottom'}">
					<view class="title" v-if="title" :style="{paddingTop: mode == 'center' ? '40rpx' : ''}">{{title}}</view>
					<slot></slot>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name:"my-popup",
		props: {
			title: {
				default: ''
			},
			closeable:{		//是否显示关闭图标
				default: true
			},
			closeIconPos: {	// 关闭图标位置	 top-left / bottom-left / bottom-right
				default: 'top-right'
			},
			mode: {
				default: 'bottom'	// top / right / bottom / center
			},
			zIndex: {
				default: 10075
			},
			closeOnClickOverlay: {
				default: false
			}
		},
		data() {
			return {
				show: false
			};
		},
		methods:{
			open(){
				this.show = true
				this.$emit('popupOpen')
			},
			close(){
				this.show = false
				this.$emit('popupClose')
			}
		}
	}
</script>

<style lang="scss">
	.content{
		min-width: 400rpx;
		
		.title{
			text-align: center;
			padding: 25rpx 0;
			font-size: 32rpx;
			font-weight: 400;
			color: #333333;
		}
	}
	
	.fit-ios{
		padding-bottom: calc(15rpx + constant(safe-area-inset-bottom)); /* 兼容 iOS 设备 */
		padding-bottom: calc(15rpx + env(safe-area-inset-bottom)); /* 兼容 iPhone X 及以上设备 */
	}
</style>